<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item :label="$t('业务时间')">
              <j-date :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择开始时间')" class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择结束时间')" class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item :label="$t('会员信息')">
              <a-input :placeholder="$t('请输入会员手机号/卡号/姓名')" v-model="queryParam.memberInfo"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('限时币')">
                <a-input :placeholder="$t('请输入限时币编号/名称')" v-model="queryParam.coinInfo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="8" :md="9" :sm="24">
              <a-form-item :label="$t('设备名称(编码)')">
                <a-select show-search :filter-option="false" @search="handleSearch" v-model="queryParam.deviceId">
                  <a-select-option :value="item.id" :key="index" v-for="(item, index) in deviceList">
                    <span>{{ item.name }}</span>
                    <span v-if="item.name != $t('全部')">({{ item.id }})</span>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="!tenantid">
              <a-form-item :label="$t('门店')">
                <a-select v-model="queryParam.tenantId">
                  <a-select-option v-for="(item,i) in shops" :key="i" :value="item.value">{{item.title}}<span v-if="item.value != ''">（{{item.value}}）</span></a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t('查询')}}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('重置')}}</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? $t('收起') : $t('展开') }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button v-has="'bisMemberLimitCoinUse:export'" type="primary" icon="download" :loading="exloading" @click="handleExportXls($t('限时币使用记录'))">{{$t('导出')}}</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customHeaderRow="customHeaderRow"
        :customRow="customRow"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">{{$t('无图片')}}</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">{{$t('无文件')}}</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            {{$t('下载')}}
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">{{$t('编辑')}}</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">{{$t('更多')}} <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">{{$t('详情')}}</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm :title="$t('确定删除吗?')" @confirm="() => handleDelete(record.id)">
                  <a>{{$t('删除')}}</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <template slot="footer">
          <div style="font-weight: bold">
            <span style="margin-left: 15px;margin-right: 5px">{{$t('交易笔数')}}：</span>
            <span>{{ totalInfo && totalInfo.count?totalInfo.count.toFixed(0):0 }}</span>
            <span style="margin-left: 15px;margin-right: 5px">{{$t('交易币')}}：</span>
            <span>{{ totalInfo && totalInfo.coin?totalInfo.coin.toFixed(2):'0.00' }}</span>
          </div>
        </template>
      </a-table>
    </div>

    <bis-member-limit-coin-use-modal ref="modalForm" @ok="modalFormOk"></bis-member-limit-coin-use-modal>
  </a-card>
</template>

<script>
  import Vue from 'vue'
  import moment from 'moment'
  import '@/assets/less/TableExpand.less'
  import { getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
  import BisMemberLimitCoinUseModal from './modules/BisMemberLimitCoinUseModal'

  export default {
    name: 'BisMemberLimitCoinUseList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      BisMemberLimitCoinUseModal
    },
    data () {
      return {
        description: '限时币使用记录管理页面',
        moment,
        // 表头
        columns: [
          {
            title:this.$t('业务时间'),
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title:this.$t('手机号'),
            align:"center",
            dataIndex: 'memberPhone'
          },
          {
            title:this.$t('卡号'),
            align:"center",
            dataIndex: 'chipNo'
          },
          {
            title:this.$t('姓名'),
            align:"center",
            dataIndex: 'memberName'
          },
          {
            title:this.$t('机号'),
            align:"center",
            dataIndex: 'machineNo'
          },
          {
            title:this.$t('编号'),
            align:"center",
            dataIndex: 'coinId'
          },
          {
            title:this.$t('名称'),
            align:"center",
            dataIndex: 'goodsName'
          },
          {
            title:this.$t('交易前币值'),
            align:"right",
            dataIndex: 'beforeCoin',
            customRender: (text, r) => {
              return r.beforeCoin.toFixed(2);
            }
          },
          {
            title:this.$t('使用币值'),
            align:"right",
            dataIndex: 'coin',
            customRender: (text, r) => {
              return r.coin.toFixed(0);
            }
          },
          {
            title:this.$t('交易后币值'),
            align:"right",
            dataIndex: 'afterCoin',
            customRender: (text, r) => {
              return r.afterCoin.toFixed(0);
            }
          },
          {
            title:this.$t('设备编码'),
            align:"center",
            dataIndex: 'deviceId'
          },
          {
            title:this.$t('设备名称'),
            align:"center",
            dataIndex: 'deviceName'
          }
        ],
        url: {
          list: "/member/bisMemberLimitCoinUse/list",
          delete: "/member/bisMemberLimitCoinUse/delete",
          deleteBatch: "/member/bisMemberLimitCoinUse/deleteBatch",
          exportXlsUrl: "/member/bisMemberLimitCoinUse/exportXls",
          importExcelUrl: "member/bisMemberLimitCoinUse/importExcel",
          totalUrl: "member/bisMemberLimitCoinUse/total"
        },
        dictOptions:{},
        superFieldList:[],
        deviceList:[],
        isfooter: true,
        queryParam: {
          tenantId: ''
        },
        shops:[],
        tenantid: Vue.ls.get('TENANT_ID'),
      }
    },
    async created() {
      if (!this.tenantid) {
        await initDictOptions('bis_shop,name,code').then((res) => {
          if (res.success) {
            this.shops = res.result
            this.shops.unshift({ value: '', title: this.$t('全部') })
          }
        })
        let dtl = {
            title: this.$t('门店编码'),
            align: 'center',
            dataIndex: 'tenantId',
            width: 100,
            customCell: (r, i) => {
              return {
                style: {
                  whiteSpace: 'normal',
                },
              }
            },
          },
          dtl1 = {
            title: this.$t('门店名称'),
            align: 'center',
            dataIndex: 'tenantId_dictText',
            width: 140,
            customRender: (text, record) =>{
              if(text){
                return text
              }
              let x = this.shops.findIndex(s=>{return s.value == record.tenantId})
              if(x>-1){
                return this.shops[x].title
              }
              return record.tenantId
            },
            customCell: (r, i) => {
              return {
                style: {
                  whiteSpace: 'normal',
                },
              }
            },
          }
        this.columns.unshift(dtl1)
        this.columns.unshift(dtl)
      }
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){},
      handleSearch(value) {
        let query={}
        if(value){
          query.deviceInfo= value
        }
        getAction('/device/bisDeviceInfo/list',query).then((res) => {
          if (res.success) {
            this.deviceList = res.result.records
            this.deviceList.unshift({ id: '', name: this.$t('全部') })
          }
        })
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'datetime',value:'createTime',text:this.$t('使用时间')})
        fieldList.push({type:'string',value:'memberPhone',text:this.$t('手机号'),dictCode:''})
        fieldList.push({type:'string',value:'chipNo',text:this.$t('卡号'),dictCode:''})
        fieldList.push({type:'string',value:'memberName',text:this.$t('姓名'),dictCode:''})
        fieldList.push({type:'string',value:'coinId',text:this.$t('限时币ID'),dictCode:''})
        fieldList.push({type:'string',value:'goodsName',text:this.$t('名称'),dictCode:''})
        fieldList.push({type:'BigDecimal',value:'beforeCoin',text:this.$t('交易前币值'),dictCode:''})
        fieldList.push({type:'BigDecimal',value:'coin',text:this.$t('使用币值'),dictCode:''})
        fieldList.push({type:'BigDecimal',value:'afterCoin',text:this.$t('交易后币值'),dictCode:''})
        fieldList.push({type:'string',value:'deviceId',text:this.$t('设备ID'),dictCode:"bis_device_info,name,id"})
        fieldList.push({type:'string',value:'createBy',text:this.$t('操作员'),dictCode:"sys_user,realname,realname"})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>